<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>SIN图像</title>
    </head>
    <style type="text/css">
        canvas{border:solid 2px #CCC;}
        #nav{margin: 20px auto;text-align:center;}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var ctx = can.getContext('2d');
            for(var x=0.5;x< 1200;x += 10){
				ctx.moveTo(x,0);
				ctx.lineTo(x,600);
			}
			for(var y=0.5;y< 480;y += 10){
				ctx.moveTo(0,y);
				ctx.lineTo(1200,y);
			}
			ctx.strokeStyle='#bbb';
            ctx.stroke();
            //x轴
            ctx.beginPath();
			ctx.moveTo(0,240);
			ctx.lineTo(1180,240);
			ctx.moveTo(1175,235);
			ctx.lineTo(1180,240);
			ctx.lineTo(1175,245);
            ctx.fillText('X',1175,225);
			ctx.strokeStyle = "#f00";
			ctx.lineWidth = 2;
			for(var x=0;x< 1200;x += 100){
				ctx.moveTo(x,235);
				ctx.lineTo(x,240);
                ctx.fillText('' + x, x + 3,250);
			}
			ctx.stroke();
            //画曲线 sin曲线
			ctx.beginPath();
			ctx.moveTo(0,240);
			for(var x=0;x< 1151 ;x+=1){
				ctx.lineTo(x,-220*Math.sin(  x * Math.PI/100)+240);
			}
			ctx.strokeStyle = "#FF0000";
			ctx.lineWidth = 1;
			ctx.stroke();
        }
    </script>
    <body onload="pageLoad();">
    <div id="nav">
        <canvas id="can" width="1200px" height="480px">4</canvas>
    </div>
    </body>
</html>